
import React, { Component } from 'react';
import { Form,Input,Row,Col,InputNumber,DatePicker,LocaleProvider } from 'antd';
import './modal.css';
import PropTypes from 'prop-types';
import zh_CN from 'antd/lib/locale-provider/zh_CN';  // 将日期选择器设置为中文
import moment from 'moment';
import 'moment/locale/zh-cn';  // 将日期选择器设置为中文

const dateFormat = 'YYYY-MM-DD';
moment.locale('zh-cn');   // 将日期选择器设置为中文

class EditDataFileForm extends Component {

  static propTypes = {   
    setDate : PropTypes.func.isRequired,
    setForm : PropTypes.func.isRequired
  }

  formRef = React.createRef();  // form对象
  
  componentDidMount() {
    this.props.setForm(this.formRef);  // 调用父组件传递的函数，目的是将 参数以实参的形式传递给父组件
    //console.log('form',this.formRef);
  }

  handleOnChange = (e,dateString) => {
    //console.log("日期的input值2",dateString);
    this.props.setDate(dateString);   // 将日期传给 父组件
  }

  render() {
    const layout = {
      labelCol: { span: 6 },
      wrapperCol: { span: 15 },   
    };
    const {start_depth,end_depth,measuring_time,measuring_address,casing_depth,operator,remark} = this.props.docInfor;  
    //console.log("获取到的数据",start_depth,end_depth,measuring_time,measuring_address,casing_depth,operator,remark);
    return (
      <LocaleProvider locale={zh_CN}>
        <div className="upload-data-file">  
          <Form  
            {...layout}
            ref={this.formRef}   
            name="control-ref" 
            initialValues={{
              start_depth: start_depth,
              end_depth: end_depth,
              measuring_address: measuring_address,
              casing_depth: casing_depth,
              operator: operator,
              remark: remark,
            }}
          > 
            <Row>
              <Col span={4}>&nbsp;&nbsp;起始深度：</Col>
              <Col span={8}>
                <Form.Item className="file-params" name="start_depth" rules={[{ required: true, message:"不能为空！" }]}> 
                  <InputNumber style={{width:118}} disabled />  
                </Form.Item>
              </Col>
              <Col span={4}>&nbsp;&nbsp;终止深度：</Col>
              <Col span={8}>
                <Form.Item className="file-params" name="end_depth" rules={[{ required: true, message:"不能为空！" }]}>
                  <InputNumber style={{width:118}} disabled />  
                </Form.Item>
              </Col>   
            </Row>
            <Row>
              <Col span={4}>&nbsp;&nbsp;测量时间：</Col>
              <Col span={8}>
                <Form.Item className="file-params" name="measuring_time">
                  <DatePicker style={{width:118}} allowClear={true} defaultValue={moment(measuring_time, dateFormat)} format={dateFormat} onChange={(e,dateString) => this.handleOnChange(e,dateString)}/>
                </Form.Item>
              </Col>
              <Col span={4}>&nbsp;&nbsp;测井地址：</Col>
              <Col span={8}>
                <Form.Item className="file-params" name="measuring_address">
                  <Input className="ant-input1" /> 
                </Form.Item>
              </Col>
            </Row>
            <Row>
              <Col span={4}>&nbsp;&nbsp;套管深度：</Col>
              <Col span={8}>
                <Form.Item className="file-params" name="casing_depth">
                  <InputNumber style={{width:118}} /> 
                </Form.Item>
              </Col>
              <Col span={4}>&nbsp;&nbsp;操&nbsp;作&nbsp;&nbsp;员：</Col>
              <Col span={8}>
                <Form.Item className="file-params" name="operator">
                  <Input className="ant-input1" /> 
                </Form.Item>
              </Col>
            </Row>
            <Row>
              <Col span={4}>&nbsp;&nbsp;备&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注：</Col>
              <Col span={20}>
                <Form.Item className="file-params" name="remark">
                  <Input.TextArea style={{ width: 383 }} />
                </Form.Item>
              </Col>
            </Row>
          </Form>  
        </div>  
      </LocaleProvider>
      
    )
  }
}

export default EditDataFileForm;